<template>
    <div>        
        <el-row>
            <el-card class="card-box">            
                <div>
                    <template>
                       <el-form ref="form" :model="form" :rules="rules" label-width="250px">      
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="SNI名称:" prop="tags">
                                        <el-tag :key="sni" v-for="sni in form.snis" closable 
                                        :disable-transitions="false" 
                                        @close="handleTagClose(sni,'sni')">
                                            {{sni}}
                                        </el-tag>
                                        
                                        <span slot="label">
                                            <el-tooltip content="Server Name Indication 零个或多个主机名的数组，作为 SNI 与此证书相关联" placement="right-end">
                                            <i class="el-icon-question"></i>
                                            </el-tooltip>
                                            SNI名称:
                                        </span>

                                        <el-input v-model="inputSni" placeholder="零个或多个主机名的数组，作为 SNI 与此证书相关联"
                                        @keyup.enter.native="handleInputTagConfirm('sni')"
                                        @blur="handleInputTagConfirm('sni')"
                                        ></el-input>
                                    </el-form-item>                    
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="标签:" prop="tags">
                                        <el-tag :key="tag" v-for="tag in form.tags" closable 
                                        :disable-transitions="false" 
                                        @close="handleTagClose(tag,'tag')">
                                            {{tag}}
                                        </el-tag>
                                        
                                        <span slot="label">
                                            <el-tooltip content="与目标关联的一组可选字符串，用于分组和过滤。" placement="right-end">
                                            <i class="el-icon-question"></i>
                                            </el-tooltip>
                                            标签:
                                        </span>

                                        <el-input v-model="inputTag" placeholder="与目标相关联的一组可选字符串，用于分组和过滤。按enter键 确认"
                                        @keyup.enter.native="handleInputTagConfirm('tag')"
                                        @blur="handleInputTagConfirm('tag')"
                                        ></el-input>
                                    </el-form-item>                    
                                </el-col>
                            </el-row>

                            

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="SSL私钥(key):" prop="sslKey">
                                        
                                        <span slot="label">
                                            <el-tooltip content="SSL 密钥对的 PEM 编码私钥" placement="right-end">
                                            <i class="el-icon-question"></i>
                                            </el-tooltip>
                                            SSL私钥(key):
                                        </span>

                                        <el-input 
                                        type="textarea" 
                                        autosize 
                                        placeholder="SSL 密钥对的 PEM 编码私钥" 
                                        show-word-limit
                                        maxlength="10000"
                                        v-model="form.key"></el-input>
                                    </el-form-item>                    
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="SSL证书链(cert):" prop="sslKey">
                                        
                                        <span slot="label">
                                            <el-tooltip content="SSL 密钥对的 PEM 编码公共证书链。" placement="right-end">
                                            <i class="el-icon-question"></i>
                                            </el-tooltip>
                                            SSL证书链(cert):
                                        </span>

                                        <el-input 
                                        type="textarea" 
                                        autosize 
                                        show-word-limit
                                        maxlength="10000"
                                        placeholder="SSL 密钥对的 PEM 编码公共证书链。" 
                                        v-model="form.cert"></el-input>
                                    </el-form-item>                    
                                </el-col>
                            </el-row>
                       </el-form>
                       
                        <el-row type="flex" justify="end">
                            <el-col :span="12">
                                <el-button type="primary" @click="submitForm">{{formSubmitBtnText}}</el-button>
                                <el-button @click="cancel">取 消</el-button>
                            </el-col>
                        </el-row>  
                    </template>
                </div>
            </el-card>
        </el-row>
    </div>
</template>
<script>
import {addCertificate,updateCertificate} from '@/api/kong/certificate.js'
export default {
    props: {
        operate:{
            type: String,
            required: false,
            default: 'add',
        },
        certificate:{
            type: Object,
            required: false,
        }
    },
    data () {
        return {            
            form:{
                snis:[],
                tags:[],
                key:null,
                cert: null,
            },
            rules:{},
            inputTag:"",
            inputSni:"",
            formSubmitBtnText:"添 加"
        }
    },
    created(){
        if(this.operate=='add'){
            this.formSubmitBtnText="添 加"
        }
        if(this.operate=='edit'){
            this.formSubmitBtnText="修 改"
        }
        if(this.certificate){
            this.form =this.certificate || this.form
            // console.log(JSON.stringify(this.form))
        }
    },
    methods:{

        submitForm(){
            this.$refs['form'].validate(valid => {
                if (!valid) return;

                if(this.operate=="add"){
                    // console.log(this.form);
                    addCertificate(this.form).then(res =>{
                        // console.log(JSON.stringify(res));
                        // 重置表单
                        this.reset();
                        // 关闭窗口
                        this.$emit('callback',"成功");
                    })
                }
                
                if(this.operate =="edit"){
                    updateCertificate(this.form).then(res =>{
                        // console.log(JSON.stringify(res));
                        // 重置表单
                        this.reset();
                        this.$emit('callback',"成功");
                    })
                }
            })

        },
        cancel(){
            // 重置表单
            this.reset();
            // 关闭窗口
            this.$emit('callback',"成功");
        },
        reset(){            
            // 表单字段定义
            this.form={
                snis:[],
                tags:[],
                key:null,
                cert: null,
            };
            this.resetForm("form");
        },
        // 标签关闭事件
        handleTagClose(tag,type){
            if(type=='sni'){
                this.form.snis.splice(this.form.snis.indexOf(tag),1);
            }
            if(type=='tag'){
                this.form.tags.splice(this.form.tags.indexOf(tag),1);
            }
        },

        // 标签输入确认事件
        handleInputTagConfirm(type){
            if(type=='sni'){
            let inputValue=this.inputSni;
                if(inputValue){
                    if(this.form.snis.indexOf(inputValue)>-1){
                        this.inputTag="";
                        return;
                    }
                    this.form.snis.push(inputValue);
                }
            }

            if(type=='tag'){
            let inputValue=this.inputTag;
                if(inputValue){
                    if(this.form.tags.indexOf(inputValue)>-1){
                        this.inputTag="";
                        return;
                    }
                    this.form.tags.push(inputValue);
                }
            }
            
            this.inputTag="";
        },
    }
}
</script>